import { resetQuestionDataWithLanguage } from '@/components/question/utils';
import RichText from '@/components/rich-text';
import router from '@/router';
import useQuestionnaireStore from '@/store/questionnaire';
import { Button, CheckboxGroup, Form, FormItem, Input, RangePicker, Space } from 'ant-design-vue';
import { defineComponent, reactive, ref } from 'vue';
import './style.css';
export default defineComponent({
  setup() {
    let formData = reactive<any>({});
    const formRef = ref();
    const questionnaireStore = useQuestionnaireStore();
    const basicInfo = questionnaireStore.getBasicInfo;
    const languageOptions = [
      { label: '中文', value: 'zh' },
      { label: '英文', value: 'en' },
    ];
    const rules: any = {
      name: [{ required: true, message: '请输入问卷名称', trigger: 'change' }],
      language: [
        { type: 'array', required: true, message: '请选择中英文配置信息', trigger: 'change' },
      ],
    };

    const onReset = () => {
      formRef.value.resetFields();
    };
    const onSubmit = () => {
      formRef.value
        .validate()
        .then(() => {
          const basicInfo = { ...formData };
          if (formData.period) {
            basicInfo.startDate = formData.period[0];
            basicInfo.endDate = formData.period[1];
          }
          basicInfo.mode = 'design';
          questionnaireStore.setBasicInfo({ ...basicInfo });
          if (questionnaireStore.getQuestions === undefined) {
            questionnaireStore.setQuestions([]);
          } else {
            resetQuestionDataWithLanguage(questionnaireStore.getQuestionnaire);
          }
          // router.push({ path: '/questionnaire/design' });
          router.push({ path: '/questionnaire/designPanelLayout/question-design' });
        })
        .catch(() => {
          // console.log('error', error);
        });
    };

    const initFormData = () => {
      if (!basicInfo.name) {
        return;
      }
      formData.name = basicInfo.name;
      formData.language = basicInfo.language;
      if (basicInfo.startDate) {
        formData.period = [2];
        formData.period[0] = basicInfo.startDate;
        if (basicInfo.endDate) {
          formData.period[1] = basicInfo.endDate;
        }
      }
      formData.footer = basicInfo.footer;
    };

    initFormData();

    return () => {
      return (
        <>
          <Form
            ref={formRef}
            name="basic-info"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            rules={rules}
            model={formData}
            onSubmit={onSubmit}
          >
            <FormItem label="问卷名称" name="name" wrapperCol={{ span: 10 }}>
              <Input v-model:value={formData.name} placeholder="请输入问卷名称" />
            </FormItem>
            <FormItem label="中英文配置" name="language" wrapperCol={{ span: 10 }}>
              <CheckboxGroup v-model:value={formData.language} options={languageOptions} />
            </FormItem>
            <FormItem label="问卷有效期" name="period" wrapperCol={{ span: 10 }}>
              <RangePicker
                v-model:value={formData.period}
                style="width: 100%"
                showTime
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
              />
            </FormItem>
            <FormItem label="页脚配置" name="footer">
              <RichText v-model:value={formData.footer} />
            </FormItem>
            <FormItem wrapperCol={{ offset: 4, span: 10 }}>
              <Space>
                <Button onClick={onReset}>重置</Button>
                <Button type="primary" onClick={onSubmit}>
                  下一步
                </Button>
              </Space>
            </FormItem>
          </Form>
        </>
      );
    };
  },
});
